<template>
  <view class="outer-gods">
    <view class="outer-gods-wrapper cm-flex cm-flex-j-between cm-flex-a-center cm-padding-10">
      <view class="cm-w-0 cm-flex cm-flex-a-center cm-flex-g-1 cm-margin-right-10">
        <cm-button class="cm-margin-right-10 cm-flex-s-0" type="primary" radius="circle" :cm-style="{ width: '36px', height: '36px', padding: '0' }"
          @click="clickGodSetHandler">
          <cm-icon type="iconfont icon-category"></cm-icon>
        </cm-button>
        <view class="cm-flex-g-1 cm-w-0">
          <view class="cm-margin-bottom-5">{{ currentName }}</view>
          <view class="outer-gods-extra-text app-alert-color cm-text-12">{{ currentExtra }}</view>
        </view>
      </view>
      <view class="cm-flex cm-flex-a-center cm-flex-s-0">
        <cm-button type="primary" radius="circle" :cm-style="{ width: '36px', height: '36px', padding: '0' }"
          @click="currentOffsetHandler(-1)">
          <cm-icon type="iconfont icon-arrow-lift"></cm-icon>
        </cm-button>
        <cm-button class="cm-margin-left-10 cm-margin-right-10" type="primary" radius="circle" :cm-style="{ width: '36px', height: '36px', padding: '0' }"
          @click="extraHandler">
          <cm-icon type="iconfont icon-set"></cm-icon>
        </cm-button>
        <cm-button type="primary" radius="circle" :cm-style="{ width: '36px', height: '36px', padding: '0' }"
          @click="currentOffsetHandler(1)">
          <cm-icon type="iconfont icon-arrow-right"></cm-icon>
        </cm-button>
      </view>
    </view>
    
    <cm-picker-popup ref="godPicker" :picker-data="godSelectionsList" @confirm="selectGodHandler" exist></cm-picker-popup>
    <cm-modal ref="extraPicker" type="slot" height="444px"
      bottom-disabled mask-closed>
      <template v-slot:header>
        <view class="cm-flex cm-flex-j-between cm-flex-a-center cm-padding-10 app-border-color_ex-bottom">
          <view class="cm-flex cm-flex-a-center">
            <cm-icon type="cuIcon-titles app-theme-color"></cm-icon>
            <text>详细设置</text>
          </view>
          <cm-icon type="iconfont icon-close" @click="closeExtraHandler"></cm-icon>
        </view>
      </template>
      <view class="cm-content">
        <scroll-view style="height: 400px;" scroll-y :scroll-top="modalScrollTop">
          <view v-for="(extra, index) in currentGod.extra" :key="index">
            <cm-divider>
              <view class="cm-bold">{{ extra.title }}</view>
            </cm-divider>
            <view class="cm-padding-10 cm-text-12 app-text-color-grey" v-if="extra.description">{{ extra.description }}</view>
            <cm-radio group-type="block"
              :value="extra.list[extra.selected].value" :radio-data="extra.list"
              @change="extraChangeHandler($event, index)"></cm-radio>
          </view>
        </scroll-view>
      </view>
    </cm-modal>
  </view>
</template>

<script src="./outerGods.js"></script>

<style lang="stylus">
@import './outerGods.styl'
</style>
